<template>
  <div class="modal flex flex-s" @click.self="onClickMask">
    <div class="inner core-animate" :style="style" @click.stop="">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { CSSProperties, computed } from 'vue';

  const emit = defineEmits(['clickMask']);
  const props = withDefaults(
    defineProps<{
      width?: string;
      height?: string;
    }>(),
    {
      width: '600px',
      height: '400px',
    }
  );

  const style = computed((): CSSProperties => {
    let { width } = props;
    if (window.innerWidth < 750) {
      width = `${window.innerWidth - 20}px`;
    }
    return {
      width,
      height: props.height,
    };
  });

  const onClickMask = () => {
    emit('clickMask');
  };
</script>

<style lang="scss" scoped>
  .modal {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: var(--mask);
    left: 0;
    z-index: 100;
    top: 0;
    .inner {
      background-color: white;
      width: v-bind(width);
      height: v-bind(height);
      border-radius: var(--radius);
    }
  }

  @media screen and (max-width: 750px) {
    .modal {
      max-width: 100vw !important;
    }
  }
</style>
